<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="统计日期" prop="statDate">
        <el-date-picker
          v-model="formData.statDate"
          type="date"
          value-format="x"
          placeholder="选择统计日期"
        />
      </el-form-item>
      <el-form-item label="统计类型：1-日活跃(DAU)，2-周活跃(WAU)，3-月活跃(MAU)" prop="statType">
        <el-select v-model="formData.statType" placeholder="请选择统计类型：1-日活跃(DAU)，2-周活跃(WAU)，3-月活跃(MAU)">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="总用户数" prop="totalUsers">
        <el-input v-model="formData.totalUsers" placeholder="请输入总用户数" />
      </el-form-item>
      <el-form-item label="活跃用户数" prop="activeUsers">
        <el-input v-model="formData.activeUsers" placeholder="请输入活跃用户数" />
      </el-form-item>
      <el-form-item label="新增用户数" prop="newUsers">
        <el-input v-model="formData.newUsers" placeholder="请输入新增用户数" />
      </el-form-item>
      <el-form-item label="回访用户数" prop="returningUsers">
        <el-input v-model="formData.returningUsers" placeholder="请输入回访用户数" />
      </el-form-item>
      <el-form-item label="活跃率（%）" prop="activityRate">
        <el-input v-model="formData.activityRate" placeholder="请输入活跃率（%）" />
      </el-form-item>
      <el-form-item label="登录用户数" prop="loginUsers">
        <el-input v-model="formData.loginUsers" placeholder="请输入登录用户数" />
      </el-form-item>
      <el-form-item label="总登录次数" prop="loginTimes">
        <el-input v-model="formData.loginTimes" placeholder="请输入总登录次数" />
      </el-form-item>
      <el-form-item label="平均登录次数" prop="avgLoginTimes">
        <el-input v-model="formData.avgLoginTimes" placeholder="请输入平均登录次数" />
      </el-form-item>
      <el-form-item label="管理员活跃用户数" prop="adminActiveUsers">
        <el-input v-model="formData.adminActiveUsers" placeholder="请输入管理员活跃用户数" />
      </el-form-item>
      <el-form-item label="会员活跃用户数" prop="memberActiveUsers">
        <el-input v-model="formData.memberActiveUsers" placeholder="请输入会员活跃用户数" />
      </el-form-item>
      <el-form-item label="PC端用户数" prop="pcUsers">
        <el-input v-model="formData.pcUsers" placeholder="请输入PC端用户数" />
      </el-form-item>
      <el-form-item label="移动端用户数" prop="mobileUsers">
        <el-input v-model="formData.mobileUsers" placeholder="请输入移动端用户数" />
      </el-form-item>
      <el-form-item label="Web端用户数" prop="webUsers">
        <el-input v-model="formData.webUsers" placeholder="请输入Web端用户数" />
      </el-form-item>
      <el-form-item label="上午活跃用户数(6-12)" prop="morningUsers">
        <el-input v-model="formData.morningUsers" placeholder="请输入上午活跃用户数(6-12)" />
      </el-form-item>
      <el-form-item label="下午活跃用户数(12-18)" prop="afternoonUsers">
        <el-input v-model="formData.afternoonUsers" placeholder="请输入下午活跃用户数(12-18)" />
      </el-form-item>
      <el-form-item label="晚上活跃用户数(18-24)" prop="eveningUsers">
        <el-input v-model="formData.eveningUsers" placeholder="请输入晚上活跃用户数(18-24)" />
      </el-form-item>
      <el-form-item label="深夜活跃用户数(0-6)" prop="nightUsers">
        <el-input v-model="formData.nightUsers" placeholder="请输入深夜活跃用户数(0-6)" />
      </el-form-item>
      <el-form-item label="活跃度最高地区1" prop="topRegion1">
        <el-input v-model="formData.topRegion1" placeholder="请输入活跃度最高地区1" />
      </el-form-item>
      <el-form-item label="地区1用户数" prop="topRegion1Users">
        <el-input v-model="formData.topRegion1Users" placeholder="请输入地区1用户数" />
      </el-form-item>
      <el-form-item label="活跃度最高地区2" prop="topRegion2">
        <el-input v-model="formData.topRegion2" placeholder="请输入活跃度最高地区2" />
      </el-form-item>
      <el-form-item label="地区2用户数" prop="topRegion2Users">
        <el-input v-model="formData.topRegion2Users" placeholder="请输入地区2用户数" />
      </el-form-item>
      <el-form-item label="活跃度最高地区3" prop="topRegion3">
        <el-input v-model="formData.topRegion3" placeholder="请输入活跃度最高地区3" />
      </el-form-item>
      <el-form-item label="地区3用户数" prop="topRegion3Users">
        <el-input v-model="formData.topRegion3Users" placeholder="请输入地区3用户数" />
      </el-form-item>
      <el-form-item label="连续1天活跃用户数" prop="consecutive1Day">
        <el-input v-model="formData.consecutive1Day" placeholder="请输入连续1天活跃用户数" />
      </el-form-item>
      <el-form-item label="连续3天活跃用户数" prop="consecutive3Days">
        <el-input v-model="formData.consecutive3Days" placeholder="请输入连续3天活跃用户数" />
      </el-form-item>
      <el-form-item label="连续7天活跃用户数" prop="consecutive7Days">
        <el-input v-model="formData.consecutive7Days" placeholder="请输入连续7天活跃用户数" />
      </el-form-item>
      <el-form-item label="连续15天活跃用户数" prop="consecutive15Days">
        <el-input v-model="formData.consecutive15Days" placeholder="请输入连续15天活跃用户数" />
      </el-form-item>
      <el-form-item label="连续30天活跃用户数" prop="consecutive30Days">
        <el-input v-model="formData.consecutive30Days" placeholder="请输入连续30天活跃用户数" />
      </el-form-item>
      <el-form-item label="计算状态：0-待计算，1-计算中，2-已完成，3-计算失败" prop="calculationStatus">
        <el-radio-group v-model="formData.calculationStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="计算开始时间" prop="calculationStartTime">
        <el-date-picker
          v-model="formData.calculationStartTime"
          type="date"
          value-format="x"
          placeholder="选择计算开始时间"
        />
      </el-form-item>
      <el-form-item label="计算结束时间" prop="calculationEndTime">
        <el-date-picker
          v-model="formData.calculationEndTime"
          type="date"
          value-format="x"
          placeholder="选择计算结束时间"
        />
      </el-form-item>
      <el-form-item label="计算耗时（秒）" prop="calculationDuration">
        <el-input v-model="formData.calculationDuration" placeholder="请输入计算耗时（秒）" />
      </el-form-item>
      <el-form-item label="错误信息" prop="errorMessage">
        <el-input v-model="formData.errorMessage" placeholder="请输入错误信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { UserActivityStatsApi, UserActivityStatsVO } from '@/api/system/useractivitystats'

/** 用户活跃度统计 表单 */
defineOptions({ name: 'UserActivityStatsForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  statDate: undefined,
  statType: undefined,
  totalUsers: undefined,
  activeUsers: undefined,
  newUsers: undefined,
  returningUsers: undefined,
  activityRate: undefined,
  loginUsers: undefined,
  loginTimes: undefined,
  avgLoginTimes: undefined,
  adminActiveUsers: undefined,
  memberActiveUsers: undefined,
  pcUsers: undefined,
  mobileUsers: undefined,
  webUsers: undefined,
  morningUsers: undefined,
  afternoonUsers: undefined,
  eveningUsers: undefined,
  nightUsers: undefined,
  topRegion1: undefined,
  topRegion1Users: undefined,
  topRegion2: undefined,
  topRegion2Users: undefined,
  topRegion3: undefined,
  topRegion3Users: undefined,
  consecutive1Day: undefined,
  consecutive3Days: undefined,
  consecutive7Days: undefined,
  consecutive15Days: undefined,
  consecutive30Days: undefined,
  calculationStatus: undefined,
  calculationStartTime: undefined,
  calculationEndTime: undefined,
  calculationDuration: undefined,
  errorMessage: undefined,
})
const formRules = reactive({
  statDate: [{ required: true, message: '统计日期不能为空', trigger: 'blur' }],
  statType: [{ required: true, message: '统计类型：1-日活跃(DAU)，2-周活跃(WAU)，3-月活跃(MAU)不能为空', trigger: 'change' }],
  totalUsers: [{ required: true, message: '总用户数不能为空', trigger: 'blur' }],
  activeUsers: [{ required: true, message: '活跃用户数不能为空', trigger: 'blur' }],
  newUsers: [{ required: true, message: '新增用户数不能为空', trigger: 'blur' }],
  returningUsers: [{ required: true, message: '回访用户数不能为空', trigger: 'blur' }],
  activityRate: [{ required: true, message: '活跃率（%）不能为空', trigger: 'blur' }],
  loginUsers: [{ required: true, message: '登录用户数不能为空', trigger: 'blur' }],
  loginTimes: [{ required: true, message: '总登录次数不能为空', trigger: 'blur' }],
  avgLoginTimes: [{ required: true, message: '平均登录次数不能为空', trigger: 'blur' }],
  adminActiveUsers: [{ required: true, message: '管理员活跃用户数不能为空', trigger: 'blur' }],
  memberActiveUsers: [{ required: true, message: '会员活跃用户数不能为空', trigger: 'blur' }],
  pcUsers: [{ required: true, message: 'PC端用户数不能为空', trigger: 'blur' }],
  mobileUsers: [{ required: true, message: '移动端用户数不能为空', trigger: 'blur' }],
  webUsers: [{ required: true, message: 'Web端用户数不能为空', trigger: 'blur' }],
  morningUsers: [{ required: true, message: '上午活跃用户数(6-12)不能为空', trigger: 'blur' }],
  afternoonUsers: [{ required: true, message: '下午活跃用户数(12-18)不能为空', trigger: 'blur' }],
  eveningUsers: [{ required: true, message: '晚上活跃用户数(18-24)不能为空', trigger: 'blur' }],
  nightUsers: [{ required: true, message: '深夜活跃用户数(0-6)不能为空', trigger: 'blur' }],
  topRegion1Users: [{ required: true, message: '地区1用户数不能为空', trigger: 'blur' }],
  topRegion2Users: [{ required: true, message: '地区2用户数不能为空', trigger: 'blur' }],
  topRegion3Users: [{ required: true, message: '地区3用户数不能为空', trigger: 'blur' }],
  consecutive1Day: [{ required: true, message: '连续1天活跃用户数不能为空', trigger: 'blur' }],
  consecutive3Days: [{ required: true, message: '连续3天活跃用户数不能为空', trigger: 'blur' }],
  consecutive7Days: [{ required: true, message: '连续7天活跃用户数不能为空', trigger: 'blur' }],
  consecutive15Days: [{ required: true, message: '连续15天活跃用户数不能为空', trigger: 'blur' }],
  consecutive30Days: [{ required: true, message: '连续30天活跃用户数不能为空', trigger: 'blur' }],
  calculationStatus: [{ required: true, message: '计算状态：0-待计算，1-计算中，2-已完成，3-计算失败不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await UserActivityStatsApi.getUserActivityStats(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as UserActivityStatsVO
    if (formType.value === 'create') {
      await UserActivityStatsApi.createUserActivityStats(data)
      message.success(t('common.createSuccess'))
    } else {
      await UserActivityStatsApi.updateUserActivityStats(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    statDate: undefined,
    statType: undefined,
    totalUsers: undefined,
    activeUsers: undefined,
    newUsers: undefined,
    returningUsers: undefined,
    activityRate: undefined,
    loginUsers: undefined,
    loginTimes: undefined,
    avgLoginTimes: undefined,
    adminActiveUsers: undefined,
    memberActiveUsers: undefined,
    pcUsers: undefined,
    mobileUsers: undefined,
    webUsers: undefined,
    morningUsers: undefined,
    afternoonUsers: undefined,
    eveningUsers: undefined,
    nightUsers: undefined,
    topRegion1: undefined,
    topRegion1Users: undefined,
    topRegion2: undefined,
    topRegion2Users: undefined,
    topRegion3: undefined,
    topRegion3Users: undefined,
    consecutive1Day: undefined,
    consecutive3Days: undefined,
    consecutive7Days: undefined,
    consecutive15Days: undefined,
    consecutive30Days: undefined,
    calculationStatus: undefined,
    calculationStartTime: undefined,
    calculationEndTime: undefined,
    calculationDuration: undefined,
    errorMessage: undefined,
  }
  formRef.value?.resetFields()
}
</script>